<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>02模板语法</title>
        <script type="text/javascript" src="../js/vue.js"></script>
        <!-- shortcut icon”这样做的结果是所有浏览器都可以理解此代码。只有当希望为新浏览器提供另一种备用图像,才有必要添加第二行使用icon -->
        <link rel ="shortcut icon" type="image/x-icon" href="../static/vue.jpg">
    </head>

    <body>
        <div id="root"><!-- 准备好一个容器root -->
            <h1>插值语法</h1>
            <h3>你好，{{name}}</h3>
            <hr/>
            <h1>指令语法</h1>
            <a v-bind:href="url">gitee</a> <!-- href属性可以被v-bind指令绑定，任何属性也都可以被绑定，v-bind可以简写为":" -->
            <a :href="url">gitee指令简写</a>
            <hr/>
            <a :href="second.url">{{second.name}}</a>
        </div>
    </body>

    <script type="text/javascript">
        Vue.config.productionTip = false //阻止Vue在启动时生成生产提示

        new Vue({
            el:'#root',
            data:{
                name:'jack',
                url:'https://gitee.com/liu-yuanjiang',
                second:{
                    name:'baidu',
                    url:'https://www.baidu.com/',
                }
            }
        })
    </script>
</html>